import { Action, Dialog, knnoButton } from '../imports';
import { DialogPage } from './dialog';

export function ActionPage() {
	return (
		<div style="display:flex;gap:0.3em">
			<button
				class={knnoButton}
				onClick={() => {
					Action.show(<DialogPage />).onClose((result) => console.log(result));
				}}
			>
				Action1
			</button>
			<button
				class={knnoButton}
				onClick={() => {
					Action.show(<DialogPage />, { align: 'left' }).onClose(() => {
						Dialog.alert('Action1 closed');
					});
				}}
			>
				Action Left
			</button>
			<button
				class={knnoButton}
				onClick={() => {
					Action.show(<DialogPage />, { align: 'right' }).onClose(() => {
						Dialog.alert('Action1 closed');
					});
				}}
			>
				Action3
			</button>
		</div>
	);
}
